import { View, Text, StyleSheet, TouchableOpacity, Platform, Image } from "react-native"
import { ChevronRight } from "lucide-react-native"
import { LinearGradient } from "expo-linear-gradient"
import { theme } from "../../constants/theme"

interface BookPlanCardProps {
    book: {
        id: string
        title: string
        subtitle: string
        mastered: number
        learning: number
        total: number
        coverImage: string
        color: string
    }
    onDetailsPress: () => void
}

export function BookPlanCard({ book, onDetailsPress }: BookPlanCardProps) {
    return (
        <View style={styles.bookCardContainer}>
            <View style={styles.bookCard}>
                <View style={styles.bookCoverContainer}>
                    <LinearGradient
                        colors={["#6B9BFF", "#4B7FE5"]}
                        start={{ x: 0, y: 0 }}
                        end={{ x: 1, y: 1 }}
                        style={styles.bookCover}
                    >
                        <View style={styles.bookCoverBadge}>
                            <Text style={styles.bookCoverBadgeText}>英语</Text>
                        </View>

                        <View style={styles.bookCoverContent}>
                            <Text style={styles.bookCoverMainTitle}>{book.title.split(" ")[0]}</Text>
                            <View style={styles.bookCoverSubtitleContainer}>
                                <Text style={styles.bookCoverSubtitle}>{book.subtitle}</Text>
                            </View>
                        </View>

                        <Image
                            source={{ uri: book.coverImage || "https://cdn-icons-png.flaticon.com/512/4341/4341025.png" }}
                            style={styles.bookCoverDecoration}
                        />
                    </LinearGradient>
                </View>

                <View style={styles.bookContent}>
                    <View style={styles.bookTitleContainer}>
                        <Text style={styles.bookTitle}>{book.title}</Text>
                        <View style={styles.bookSubtitleContainer}>
                            <Text style={styles.bookSubtitle}>{book.subtitle}</Text>
                        </View>
                    </View>

                    <View style={styles.progressContainer}>
                        <View style={styles.progressLabelContainer}>
                            <Text style={styles.progressLabel}>学习进度</Text>
                            <Text style={styles.progressPercentage}>
                                {book.total > 0 ? Math.round((book.mastered / book.total) * 100) : 0}%
                            </Text>
                        </View>

                        <View style={styles.progressBarContainer}>
                            <View style={styles.progressBar}>
                                <View
                                    style={[
                                        styles.progressFill,
                                        {
                                            width: `${book.total > 0 ? (book.mastered / book.total) * 100 : 0}%`,
                                        },
                                    ]}
                                />
                            </View>
                        </View>

                        <View style={styles.statsContainer}>
                            <View style={styles.stat}>
                                <View style={[styles.statDot, { backgroundColor: theme.colors.secondary.green.default }]} />
                                <Text style={styles.statText}>已学: {book.mastered}</Text>
                            </View>
                            <View style={styles.stat}>
                                <View style={[styles.statDot, { backgroundColor: theme.colors.neutral.gray }]} />
                                <Text style={styles.statText}>未学: {book.total - book.mastered}</Text>
                            </View>
                            <Text style={styles.totalWords}>{book.total}词</Text>
                        </View>
                    </View>

                    <TouchableOpacity style={styles.detailsButton} onPress={onDetailsPress}>
                        <Text style={styles.detailsButtonText}>查看学习详情</Text>
                        <ChevronRight size={16} color={theme.colors.primary.default} />
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    bookCardContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingBottom: theme.spacing.xl,
    },
    bookCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.transparent.black.medium,
                shadowOffset: { width: 0, height: 6 },
                shadowOpacity: 0.2,
                shadowRadius: 12,
            },
            android: {
                elevation: 6,
            },
        }),
    },
    bookCoverContainer: {
        alignSelf: "center",
        marginBottom: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.dark,
                shadowOffset: { width: 0, height: 6 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    bookCover: {
        width: 160,
        height: 200,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        justifyContent: "space-between",
        position: "relative",
        overflow: "hidden",
    },
    bookCoverBadge: {
        position: "absolute",
        top: 0,
        right: 0,
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderBottomLeftRadius: theme.borderRadius.medium,
    },
    bookCoverBadgeText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.semiBold,
    },
    bookCoverContent: {
        justifyContent: "flex-end",
    },
    bookCoverMainTitle: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.xxl,
        fontWeight: theme.fontWeight.bold,
        marginBottom: theme.spacing.sm,
        textShadowColor: "rgba(0, 0, 0, 0.2)",
        textShadowOffset: { width: 0, height: 2 },
        textShadowRadius: 3,
    },
    bookCoverSubtitleContainer: {
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        alignSelf: "flex-start",
    },
    bookCoverSubtitle: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.medium,
    },
    bookCoverDecoration: {
        position: "absolute",
        width: 80,
        height: 80,
        opacity: 0.1,
        top: -20,
        left: -20,
    },
    bookContent: {
        alignItems: "center",
    },
    bookTitleContainer: {
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    bookTitle: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.xs,
    },
    bookSubtitleContainer: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
    },
    bookSubtitle: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    progressContainer: {
        width: "100%",
        marginBottom: theme.spacing.lg,
    },
    progressLabelContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
    },
    progressLabel: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    progressPercentage: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
    },
    progressBarContainer: {
        marginBottom: theme.spacing.md,
    },
    progressBar: {
        height: 8,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 4,
    },
    progressFill: {
        height: "100%",
        backgroundColor: theme.colors.secondary.green.default,
        borderRadius: 4,
    },
    statsContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    stat: {
        flexDirection: "row",
        alignItems: "center",
    },
    statDot: {
        width: 8,
        height: 8,
        borderRadius: 4,
        marginRight: theme.spacing.xs,
    },
    statText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
    totalWords: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    detailsButton: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: `${theme.colors.primary.default}15`,
        paddingVertical: theme.spacing.sm,
        paddingHorizontal: theme.spacing.lg,
        borderRadius: theme.borderRadius.large,
    },
    detailsButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
        marginRight: theme.spacing.xs,
    },
})

